<template>
  <div class="wrap">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(img,index) of images" :key="index" @click="handleTodetail(img.link)">
        <img v-lazy="img.imgUrl" alt />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { Swipe, SwipeItem } from "vant";

export default {
  name: "swiper",
  components: {
    VanSwipe: Swipe,
    VanSwipeItem: SwipeItem
  },
  data() {
    return {
      images: [
        {
          imgUrl: "http://q81nj3xbk.bkt.clouddn.com/1.png",
          link: "https://www.zhihu.com/topic/20674003/intro"
        },
        {
          imgUrl: "http://q81nj3xbk.bkt.clouddn.com/2.png",
          link: "https://zhuanlan.zhihu.com/p/118112830"
        },
        {
          imgUrl: "http://q81nj3xbk.bkt.clouddn.com/3.png",
          link: "https://zhuanlan.zhihu.com/p/103003570"
        },
        {
          imgUrl: "http://q81nj3xbk.bkt.clouddn.com/4.png",
          link: "https://www.zhihu.com/question/379177337/answer/1100952824"
        }
      ]
    };
  },
  methods: {
    handleTodetail(url) {
      window.location.href = url;
    }
  }
};
</script>

<style lang="scss" scoped>
.van-swipe {
  width: 100%;
  height: 200px;
  .van-swipe-item {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>